<!--
 * @Descripttion: 视频数据管理
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-29 14:23:18
-->
<template>
  <div class="lb-sys-sproconfig"  v-loading="pageLoading">
    <top-nav></top-nav>
    <div class="space-lg"></div>
    <div class="flex-warp" style="background:#f4f6f8;">
      <div class="count-item">
        <div class="manage-text">
          <i class="iconfont iconShortVideo"></i>视频总数
          <lb-tool-tips padding="0">当前上传的短视频总数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.video_num || 0}}</div>
      </div>
      <div class="count-item">
        <div class="manage-text">
          <i class="iconfont iconchakanshenqing"></i>浏览总次数
          <lb-tool-tips padding="0">平台短视频功能里所有视频所产生的浏览次数总数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.browse_num || 0}}</div>
        <div class="manage-text" style="margin-top:25px">
          <i class="iconfont iconqiepian"></i>浏览总人数
          <lb-tool-tips padding="0">平台短视频功能里所有视频所产生的浏览人数总数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.browse_user || 0}}</div>
      </div>
      <div class="count-item">
        <div class="manage-text">
          <i class="iconfont iconzhuanfa1"></i>转发总次数
          <lb-tool-tips padding="0">平台短视频功能里所有视频所产生的转发次数总数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.send_num || 0}}</div>
        <div class="manage-text" style="margin-top:25px">
          <i class="iconfont iconzuzhijiagou"></i>转发总人数
          <lb-tool-tips padding="0">平台短视频功能里所有视频所产生的转发人数总数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.send_user || 0}}</div>
      </div>
      <div class="count-item">
        <div class="manage-text">
          <i class="iconfont icondianming"></i>商品点击总次数
          <lb-tool-tips padding="0">平台短视频功能里所有视频商品被点击次数总数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.goods_num || 0}}</div>
        <div class="manage-text" style="margin-top:25px">
          <i class="iconfont iconrenyuanzhuangtai"></i>商品点击总人数
           <lb-tool-tips padding="0">平台短视频功能里所有视频商品被点击人数总数</lb-tool-tips>
        </div>
        <div class="manage-num">{{count.goods_user || 0}}</div>
      </div>
    </div>
    <div class="space-lg"></div>

    <div class="flex-between" style="background:#f4f6f8;">
      <div class="count-manage">
        <div class="manage-title">获客</div>
        <div class="manage-item">
          <div class="manage-text">累计获客人数</div>
          <div class="manage-num">{{count.visitor_user}}</div>
          <!-- <div class="manage-today">今天新增 {{count.day_visitor_user}}</div> -->
        </div>
        <div class="manage-item">
          <div class="manage-text">累计获客次数</div>
          <div class="manage-num">{{count.visitor_num}}</div>
          <!-- <div class="manage-today">今天新增 {{count.day_visitor_num}}</div> -->
        </div>
        <div class="manage-item">
          <div class="manage-text">本周获客人数</div>
          <div class="manage-num">{{count.week_visitor_user}}</div>
        </div>
        <div class="manage-item">
          <div class="manage-text">本周获客次数</div>
          <div class="manage-num">{{count.week_visitor_num}}</div>
        </div>
      </div>

      <div class="count-chart">
        <div class="flex-between" style="padding:20px 20px 0px 20px">
          <div class="count-title">{{countTabForm.type === 5 ? '自定义' : rankList[rankIndex].title}}获客数据</div>
          <div class="count-rank">
            <div
              @click="toRank(index)"
              class="rank-item"
              :class="[{'rank-active': countTabForm.type === item.id}]"
              v-for="(item,index) in rankList"
              :key="index"
            >{{item.title}}</div>
            <el-date-picker
              v-model="selectDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="dateTimeChange($event,1)"
            ></el-date-picker>
          </div>
        </div>

        <div style="width:100%;height:260px;background:white;">
          <count-echarts :datas="tabCount"/>
        </div>
      </div>
    </div>

    <div class="space-lg"></div>

    <div class="page-main">
      <div style="margin-bottom:10px">

            <el-date-picker
              v-model="searchDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="searchOptions"
              @change="dateTimeChange($event,2)"
            ></el-date-picker>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        style="width: 100%"
        @sort-change="changeSort"
      >
        <el-table-column prop="day" label="时间"></el-table-column>
        <el-table-column prop="browse_num" label="浏览次数" sortable="custom"></el-table-column>
        <el-table-column prop="browse_user" label="浏览人数" sortable="custom"></el-table-column>
        <el-table-column prop="send_num" label="转发次数" sortable="custom"></el-table-column>
        <el-table-column prop="send_user" label="转发人数" sortable="custom"></el-table-column>
        <el-table-column prop="visitor_num" label="获客次数" sortable="custom"></el-table-column>
        <el-table-column prop="visitor_user" label="获客人数" sortable="custom"></el-table-column>
        <el-table-column prop="goods_num" label="商品被点击次数" width="160" sortable="custom"></el-table-column>
        <el-table-column prop="goods_user" label="商品点击人数" width="160" sortable="custom"></el-table-column>
      </el-table>

      <lb-page
        :batch="false"
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></lb-page>
    </div>
  </div>
</template>

<script>
import countEcharts from './countEcharts'
export default {
  data () {
    return {
      pageLoading: false,
      loading: false,
      total: 0,
      rankList: [
        {
          id: 1,
          title: '今日'
        },
        {
          id: 2,
          title: '昨日'
        },
        {
          id: 3,
          title: '近7日'
        },
        {
          id: 4,
          title: '近30日'
        }
      ],
      rankIndex: 0,
      selectDate: '',
      searchDate: '',
      // 日期选择范围在一个月内
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: time => {
          if (this.selectDate) {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.selectDate - one
            const maxTime = this.selectDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },
      searchOptions: {
        disabledDate: this.disabledDate
      },
      countTabForm: { type: 1, start_time: '', end_time: '' },
      initial_time: '',
      searchForm: {
        order: '',
        by: '',
        start_time: 0,
        end_time: 0,
        page: 1,
        limit: 10
      },
      tableData: [],
      count: {},
      tabCount: []
    }
  },
  components: {
    countEcharts
  },
  activated () {
    this.getTime()
    this.getCount()
    this.getCountTable()
    this.getTableDataList()
  },
  methods: {
    dateTimeChange (e, type) {
      let key = type === 1 ? 'countTabForm' : 'searchForm'
      this[key].start_time = e && typeof e === 'object' ? e[0] : ''
      this[key].end_time = e && typeof e === 'object' ? e[1] : ''

      if (type === 1) {
        this.$set(this[key], 'type', e && typeof e === 'object' ? 5 : 1)
        this.$set(this[key], 'rankIndex', e && typeof e === 'object' ? 4 : 0)
        this.getCountTable()
      } else {
        this.getTableDataList(1)
      }
    },
    toRank (index) {
      this.rankIndex = index
      this.countTabForm.type = this.rankList[index].id
      this.getCountTable()
    },
    changeSort (val) {
      let { order, prop } = val
      this.searchForm.order = prop
      this.searchForm.by = order === 'ascending' ? 'asc' : 'desc'
      this.handleCurrentChange(1)
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    },
    async getTime () {
      let { data } = await this.$api.shortVideoInitialTime()
      this.initial_time = data.initial_time
    },
    disabledDate (time) {
      const one = 1 * 24 * 3600 * 1000
      return time.getTime() < this.initial_time * 1000 || time.getTime() > Date.now() - one
    },
    async getCount () {
      this.pageLoading = true
      let { data: count } = await this.$api.shortvideoAll()
      this.pageLoading = false
      this.count = count
    },
    async getCountTable () {
      let { countTabForm } = this
      let { data: tabCount } = await this.$api.shortvideoTable(countTabForm)
      this.tabCount = tabCount
    },
    async getTableDataList (flag) {
      if (flag) this.searchForm.page = 1
      this.loading = true
      let { searchForm } = this
      console.log(searchForm, 'searchForm')
      let { code, data } = await this.$api.shortvideoDayList(searchForm)
      this.loading = false
      if (code !== 200) return
      this.tableData = data.data
      this.total = data.total
      this.start_time = data.start_time
      this.end_time = data.end_time
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-warp {
  display: flex;
  flex-wrap: wrap;
}

.flex-y-center {
  display: flex;
  align-items: center;
}
.count-item {
  width: 23.5%;
  height: 165px;
  background: white;
  margin-left: 2%;
  padding: 20px;
  .iconfont{
    color: #7094FA;
    font-size: 16px;
    margin-right: 10px;
  }
  .tool-tips {
    margin-top: 0px;
    padding-top: 0px;
    flex: 1;
    color:#666
  }
  .manage-num{
    margin-top: 5px;
  }
}
.count-item:nth-child(1) {
  margin-left: 0;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.count-manage {
  width: 30%;
  height: 320px;
  margin-right: 20px;
  background: white;
  padding: 20px 0 0 20px;
  .manage-title {
    font-size: 14px;
    color: #333;
    margin-top: 9px;
    margin-bottom: 50px;
  }
  .manage-item {
    width: 50%;
    height: 100px;
    display: inline-block;
    float: left;
  }
}
.manage-text {
  font-size: 13px;
  color: #999999;
}
.manage-num {
  font-size: 20px;
  color: #333;
}
.manage-today {
  font-size: 10px;
  color: #3388ff;
}

.count-chart {
  width: 68%;
  // height: 300px;
  background: white;
  .count-title {
    font-size: 14px;
    color: #333;
  }
  .count-rank {
    display: flex;
    flex-wrap: wrap;
    color: #333;
  }
  .rank-item {
    font-size: 12px;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
  }
  .rank-item.rank-active {
    color: #4891ff;
  }
}

.el-form {
  width: 100%;
}
.el-input,
.el-select {
  width: 200px;
}
.el-cascader {
  width: 300px;
}
.space-lg {
  width: 100%;
  height: 20px;
  background: #f4f6f8;
}
</style>
